import React, { useEffect, useState } from 'react'
import { getRolTab, getallRole, getRoleByid, updataRole, deleteRole } from '../../../api/right-manageApi'

import {
    ExclamationCircleOutlined
} from '@ant-design/icons';
import { Table, Button, Modal, Tree, message } from 'antd'
const { confirm } = Modal;

export default function RoleList() {
    const [dataSource, setdatasource] = useState([])
    const [current, setcurrent] = useState([])
    const [currentId, setcurrentId] = useState(0)
    const [treeData, setTreeData] = useState([])
    const [isModalOpen, setIsModalOpen] = useState(false);
    // 表头
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            render: (id) => {
                return <b>{id}</b>
            }
        }, {
            title: '角色名称',
            dataIndex: 'roleName',
        }, {
            title: '操作',
            render: (item) => {
                return (
                    <div>
                        <Button style={{ margin: '0 10px' }}
                            type="primary"
                            size='small'
                            danger
                            onClick={() => onDelete(item)}
                        >删除</Button>
                        <Button type="primary"
                            size='small'
                            onClick={() => {
                                setIsModalOpen(true)
                                getrowRole(item.id)
                                setcurrentId(item.id)
                            }
                            }
                        >编辑</Button>
                        <Modal title="配置权限"
                            open={isModalOpen}
                            onOk={handleOk}
                            onCancel={() => { setIsModalOpen(false) }}>
                            <Tree
                                checkable
                                checkedKeys={current}
                                onSelect={onSelect}
                                onCheck={(onCheck)}
                                treeData={treeData}
                                checkStrictly={true}
                                fieldNames={{
                                    key: 'routeKey'
                                }}
                            />
                        </Modal>
                    </div>

                )
            }
        },

    ]
    // 副作用函数
    useEffect(
        () => {
            getList()
            getRoghtList()
        }
        , [])
    // 请求表格列表数据
    const getList = () => {
        getRolTab().then((res) => {
            setdatasource(res.roleList);
        })
    }
    // 请求树形组件列表
    const getRoghtList = () => {
        getallRole().then((res) => {
            setTreeData(res.data)
        })
    }
    // 删除请求
    const deleteItem = (item) => {
        deleteRole(item.id).then((res) => {
            getList()
        })
    }
    // 删除按钮回调
    const onDelete = (item) => {
        confirm({
            title: '你确定要删除吗?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                deleteItem(item)
            },
            onCancel() {
            },
        })
    }
    // 编辑按钮ok回调
    const handleOk = () => {
        setIsModalOpen(false);
        //提交修改
        updataRole({
            id: currentId,
            rights: [...current.checked]
        }).then((res) => {
            console.log(res);
            if (res.data?.code === 500) {
                message.error(res.data.msg)
            } else {
                message.success('修改成功！')
                getList()
            }
        })
    };
    const onSelect = (selectedKeys, info) => {
        console.log('selected', selectedKeys, info);

    };
    // 编辑按钮，获取本行角色权限
    const getrowRole = (id) => {
        getRoleByid(id).then((res) => {
            setcurrent({
                checked: res.roleMenuVO?.rights,
                halfChecked: []
            })
        })
    }
    // 权限编辑树，选中回调
    const onCheck = (checkedKeys) => {
        setcurrent(checkedKeys)
    };
    return (
        <div>
            <Table dataSource={dataSource}
                columns={columns}
                rowKey={(item) => item.id}
            />
        </div>
    )
}
